```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gooey - AI辅助开发利器</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -38px;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #6e8efb;
            border: 3px solid #a777e3;
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
        }
        .btn-primary {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .drop-cap:first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.8;
            margin-right: 0.1em;
            color: #6e8efb;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">Gooey</h1>
                    <h2 class="text-xl md:text-2xl text-white/90 mb-6">为开发者打造的AI辅助开发神器</h2>
                    <p class="text-lg mb-8 text-white/90">开源桌面应用，通过直观GUI增强Claude Code交互体验，提升开发效率</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/getAsterisk/gooey" class="btn-primary px-6 py-3 rounded-lg text-white font-semibold hover:opacity-90 transition duration-300 inline-flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub仓库
                        </a>
                        <a href="#installation" class="bg-white px-6 py-3 rounded-lg text-purple-800 font-semibold hover:bg-gray-100 transition duration-300 inline-flex items-center">
                            <i class="fas fa-download mr-2"></i> 立即安装
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-24 h-24 bg-purple-300 rounded-lg opacity-30"></div>
                        <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-blue-300 rounded-lg opacity-30"></div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1756201072485-e46692dd-3293-4321-9384-855c26edf6c6.png" 
                             alt="Gooey界面截图" 
                             class="relative z-10 rounded-xl shadow-2xl border-4 border-white">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-100 rounded-full mb-4">问题痛点</span>
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题？</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">开发者在使用命令行工具时面临的常见挑战</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-terminal text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">命令行操作复杂</h3>
                    </div>
                    <p class="text-gray-600">传统CLI工具界面不够直观，会话管理繁琐，缺乏可视化分析功能，导致开发效率低下。</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">项目管理困难</h3>
                    </div>
                    <p class="text-gray-600">VS Code扩展或Jira等工具难以无缝整合AI驱动的代码开发，对会话历史、API成本的跟踪不够便捷。</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-exchange-alt text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">项目切换效率低</h3>
                    </div>
                    <p class="text-gray-600">需要快速切换项目或管理多个AI代理时，命令行操作效率低下且易出错，增加了开发复杂度。</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-orange-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-chart-line text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">成本控制不透明</h3>
                    </div>
                    <p class="text-gray-600">缺乏对Claude API使用情况和令牌消耗的实时监控，难以进行预算管理和优化。</p>
                </div>
            </div>
            <div class="mt-10 bg-purple-50 p-6 rounded-xl border-l-4 border-purple-500">
                <h3 class="text-xl font-semibold text-purple-800 mb-3">Gooey的解决方案</h3>
                <p class="text-gray-700 drop-cap">Gooey通过直观的图形用户界面(GUI)完美解决了这些问题，将Claude Code的强大功能与项目管理、数据分析无缝结合，显著简化了AI辅助开发的复杂性。开发者现在可以专注于创造，而不是工具操作。</p>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full mb-4">核心功能</span>
                <h2 class="text-3xl font-bold mb-4">Gooey的核心功能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">强大的功能组合，提升您的AI辅助开发体验</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-folder-open text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">项目与会话管理</h3>
                    </div>
                    <p class="text-gray-600 mb-2">通过可视化项目浏览器管理所有Claude Code项目，支持查看、恢复会话及智能搜索，极大提升项目切换效率。</p>
                    <div class="mt-4 text-sm text-blue-600 flex items-center">
                        <i class="fas fa-clock mr-1"></i>
                        <span>快速恢复历史会话</span>
                    </div>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-robot text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">自定义AI代理</h3>
                    </div>
                    <p class="text-gray-600 mb-2">创建针对特定任务的AI代理，设置自定义系统提示和行为，支持后台运行，适合自动化复杂开发任务。</p>
                    <div class="mt-4 text-sm text-purple-600 flex items-center">
                        <i class="fas fa-cog mr-1"></i>
                        <span>高度可定制化</span>
                    </div>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-chart-pie text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">使用情况分析</h3>
                    </div>
                    <p class="text-gray-600 mb-2">实时监控Claude API的使用成本和令牌消耗，提供按模型、项目和时间的详细图表，便于预算管理和优化。</p>
                    <div class="mt-4 text-sm text-green-600 flex items-center">
                        <i class="fas fa-wallet mr-1"></i>
                        <span>成本透明可控</span>
                    </div>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-orange-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-server text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">MCP服务器管理</h3>
                    </div>
                    <p class="text-gray-600 mb-2">通过集成的Model Context Protocol(MCP)界面管理服务器，支持导入配置、测试连接，简化与Claude Desktop的协作。</p>
                    <div class="mt-4 text-sm text-orange-600 flex items-center">
                        <i class="fas fa-network-wired mr-1"></i>
                        <span>无缝协作体验</span>
                    </div>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-history text-red-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">时间线与检查点</h3>
                    </div>
                    <p class="text-gray-600 mb-2">支持会话版本控制，创建检查点，浏览分支时间线，快速恢复或比较代码变更，增强开发灵活性。</p>
                    <div class="mt-4 text-sm text-red-600 flex items-center">
                        <i class="fas fa-code-branch mr-1"></i>
                        <span>版本回溯无忧</span>
                    </div>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-shield-alt text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">开源与安全</h3>
                    </div>
                    <p class="text-gray-600 mb-2">基于AGPL-3.0许可，数据本地存储，无遥测跟踪，保障开发者隐私安全，适合注重数据保护的团队。</p>
                    <div class="mt-4 text-sm text-indigo-600 flex items-center">
                        <i class="fas fa-lock mr-1"></i>
                        <span>数据安全至上</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-green-800 bg-green-100 rounded-full mb-4">应用场景</span>
                <h2 class="text-3xl font-bold mb-4">Gooey的使用场景</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解Gooey如何在不同开发场景中发挥作用</p>
            </div>
            <div class="space-y-8">
                <div class="bg-gray-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">1. 独立开发者优化编码流程</h3>
                    <p class="text-gray-600 mb-4">一名独立开发者使用Gooey管理多个Claude Code项目。项目浏览器帮助快速切换项目，时间线功能记录每次会话的检查点，开发者可随时回溯代码变更。AI代理自动生成测试用例，节省手动编写时间。</p>
                    <div class="bg-white p-4 rounded-lg mb-4">
                        <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                            思考问题
                        </h4>
                        <p class="text-gray-600">Gooey的检查点功能如何帮助你管理开发中的多次迭代？</p>
                    </div>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">2. 团队协作开发SaaS产品</h3>
                    <p class="text-gray-600 mb-4">一个五人团队开发前端应用，使用Gooey创建专门的AI代理来处理React组件生成。团队通过仪表板跟踪API成本，确保预算可控，同时利用MCP服务器与Claude Desktop同步配置，提高协作效率。</p>
                    <div class="bg-white p-4 rounded-lg mb-4">
                        <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-users text-blue-500 mr-2"></i>
                            团队协作优势
                        </h4>
                        <p class="text-gray-600">共享项目配置、统一API成本监控、简化团队协作流程</p>
                    </div>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">3. 复杂项目调试与优化</h3>
                    <p class="text-gray-600 mb-4">开发者在调试微服务架构时，使用Gooey的时间线功能比较不同检查点的代码差异，快速定位问题。内置CLAUDE.md编辑器帮助实时记录调试笔记，保持项目文档清晰。</p>
                    <div class="bg-white p-4 rounded-lg">
                        <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-bug text-red-500 mr-2"></i>
                            调试利器
                        </h4>
                        <p class="text-gray-600">代码差异对比、检查点回溯、实时文档记录</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages & Limitations -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="text-center mb-8">
                        <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-100 rounded-full mb-4">优势特色</span>
                        <h2 class="text-3xl font-bold mb-4">Gooey的优势与特色</h2>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">直观的GUI体验</h3>
                                <p class="text-gray-600">相比Claude Code CLI的命令行操作，Gooey的图形界面简化了项目管理和会话恢复，优于VS Code的基本AI扩展。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">强大的代理管理</h3>
                                <p class="text-gray-600">支持创建和运行自定义AI代理，结合后台执行和权限控制，适合复杂任务自动化，超越Trello等通用工具。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">开源与安全</h3>
                                <p class="text-gray-600">基于AGPL-3.0许可，数据本地存储，无遥测跟踪，适合注重隐私的团队。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">跨平台支持</h3>
                                <p class="text-gray-600">支持Windows、macOS和Linux，采用Rust和Tauri 2确保性能和轻量化，优于Electron应用的资源占用。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="text-center mb-8">
                        <span class="inline-block px-3 py-1 text-sm font-semibold text-red-800 bg-red-100 rounded-full mb-4">注意事项</span>
                        <h2 class="text-3xl font-bold mb-4">当前局限性</h2>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">Windows兼容性问题</h3>
                                <p class="text-gray-600">部分用户报告安装问题(如pnpm或Git Bash依赖)，兼容性仍需改进。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">API依赖与成本</h3>
                                <p class="text-gray-600">依赖Claude Code CLI和API密钥，可能增加成本，尤其对高频用户。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">社区维护节奏</h3>
                                <p class="text-gray-600">开源项目更新速度可能不如商业工具，存在90+开放问题和27个待处理拉取请求。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">功能待完善</h3>
                                <p class="text-gray-600">某些功能(如使用警报)尚未实现，可能限制高级用户体验。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cost Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full mb-4">成本与技术</span>
                <h2 class="text-3xl font-bold mb-4">使用门槛与成本</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解Gooey的技术要求和相关成本</p>
            </div>
            <div class="bg-gray-50 p-6 rounded-xl mb-8">
                <h3 class="text-xl font-semibold mb-4 text-gray-800">核心信息</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600"><strong>注册要求:</strong> 无需注册即可使用开源版本，需手动安装和配置</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600"><strong>免费版本:</strong> 核心功能完全免费，需自托管并安装Claude Code CLI</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-dollar-sign text-blue-500 mt-1 mr-3"></i>
                        <span class="text-gray-600"><strong>高级功能:</strong> 依赖Claude API，需Anthropic API密钥，成本依使用量而定</span>
                    </li>
                </ul>
            </div>
            <div class="bg-purple-50 p-6 rounded-xl mb-8">
                <h3 class="text-xl font-semibold mb-4 text-purple-800">技术要求</h3>
                <div class="grid md:grid-cols-2 gap-4">
                    <div class="bg-white p-4 rounded-lg">
                        <h4 class="font-medium text-gray-700 mb-2">基本要求</h4>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start">
                                <i class="fas fa-memory mr-2 mt-1 text-gray-500"></i>
                                <span>4GB内存(推荐8GB)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-hdd mr-2 mt-1 text-gray-500"></i>
                                <span>1GB存储空间</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white p-4 rounded-lg">
                        <h4 class="font-medium text-gray-700 mb-2">软件依赖</h4>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start">
                                <i class="fas fa-cog mr-2 mt-1 text-gray-500"></i>
                                <span>Rust 1.70.0+, Bun, Git</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-terminal mr-2 mt-1 text-gray-500"></i>
                                <span>Claude Code CLI</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bg-blue-50 p-4 rounded-lg">
                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                    <i class="fas fa-question-circle text-blue-500 mr-2"></i>
                    思考问题
                </h4>
                <p class="text-gray-600">你的开发环境是否满足Gooey的技术要求，还是需要更简单的替代方案？</p>
            </div>
        </div>
    </section>

    <!-- Installation Guide -->
    <section class="py-16 px-4 bg-gray-50" id="installation">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-orange-800 bg-orange-100 rounded-full mb-4">安装指南</span>
                <h2 class="text-3xl font-bold mb-4">Gooey上手指南</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">快速开始使用Gooey的完整步骤</p>
            </div>
            <div class="space-y-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                        <span class="bg-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span>
                        安装先决条件
                    </h3>
                    <div class="bg-white p-6 rounded-xl code-block">
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">安装Rust</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">安装Bun</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>curl -fsSL https://bun.sh/install | bash</code></pre>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">安装Git</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code># Linux
sudo apt install git

# macOS
brew install git

# Windows: 从 https://git-scm.com 下载</code></pre>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                        <span class="bg-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span>
                        克隆并构建Gooey
                    </h3>
                    <div class="bg-white p-6 rounded-xl code-block">
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">克隆仓库</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>git clone https://github.com/getAsterisk/gooey.git && cd gooey</code></pre>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">安装前端依赖</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>bun install</code></pre>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">开发模式(热重载)</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>bun run tauri dev</code></pre>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">生产构建</h4>
                            <pre class="bg-gray-800 text-gray-100 p-3 rounded-md overflow-x-auto"><code>bun run tauri build

# 生成可执行文件
# Linux/macOS: ./src-tauri/target/release/gooey
# Windows: ./src-tauri/target/release/gooey.exe</code></pre>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                        <span class="bg-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span>
                        启动Gooey
                    </h3>
                    <div class="bg-white p-6 rounded-xl">
                        <p class="text-gray-600 mb-4">运行可执行文件，Gooey自动检测~/.claude目录。欢迎界面选择"CC Agents"或"Projects"开始使用。</p>
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-folder-open text-blue-500 mr-2"></i>
                                    管理项目
                                </h4>
                                <p class="text-gray-600 text-sm">导航到"Projects"，选择项目，查看或恢复会话。点击会话查看首条消息和时间戳，或启动新会话。</p>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-robot text-purple-500 mr-2"></i>
                                    创建AI代理
                                </h4>
                                <p class="text-gray-600 text-sm">进入"CC Agents"，点击"Create Agent"。设置代理名称、图标、系统提示，选择Claude模型，配置文件/网络权限。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                        <span class="bg-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">4</span>
                        故障排除
                    </h3>
                    <div class="bg-white p-6 rounded-xl">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">问题</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">解决方案</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">"cargo not found"</td>
                                        <td class="px-4 py-3 text-sm text-gray-600">确保Rust已安装，运行 <code class="bg-gray-100 px-1 rounded">source ~/.cargo/env</code></td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">"webkit2gtk not found"</td>
                                        <td class="px-4 py-3 text-sm text-gray-600">安装Linux依赖或使用 <code class="bg-gray-100 px-1 rounded">libwebkit2gtk-4.0-dev</code></td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">"claude command not found"</td>
                                        <td class="px-4 py-3 text-sm text-gray-600">验证Claude Code CLI安装</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">内存不足</td>
                                        <td class="px-4 py-3 text-sm text-gray-600">运行 <code class="bg-gray-100 px-1 rounded">cargo build -j 2</code> 限制并行任务</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-12">
                <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-800 bg-indigo-100 rounded-full mb-4">系统架构</span>
                <h2 class="text-3xl font-bold mb-4">Gooey架构概览</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">可视化Gooey的核心组件与交互关系</p>
            </div>
            <div class="mermaid">
                graph TD
                    A[用户界面] -->|操作| B[项目管理]
                    A -->|配置| C[AI代理管理]
                    A -->|查看| D[使用情况仪表板]
                    
                    B --> E[本地存储]
                    C --> F[Claude API]
                    C --> E
                    D --> F
                    D --> E
                    
                    E[本地存储] -->|.claude目录| G[Claude Code CLI]
                    F[Claude API] --> G
                    
                    H[MCP服务器] --> C
                    H --> G
                    
                    style A fill:#a777e3,color:white
                    style B fill:#6e8efb,color:white
                    style C fill:#6e8efb,color:white
                    style D fill:#6e8efb,color:white
                    style E fill:#4caf50,color:white
                    style F fill:#ff9800,color:white
                    style G fill:#9c27b0,color:white
                    style H fill:#2196f3,color:white
            </div>
        </div>
    </section>

    <!-- Final CTA -->
    <section class="py-20 px-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好提升您的AI开发体验了吗？</h2>
            <p class="text-xl mb-8 text-white/90">立即下载Gooey，开启高效AI辅助开发之旅</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="https://github.com/getAsterisk/gooey" class="bg-white px-8 py-4 rounded-lg text-purple-800 font-semibold hover:bg-gray-100 transition duration-300 inline-flex items-center">
                    <i class="fab fa-github mr-2 text-xl"></i> 访问GitHub仓库
                </a>
                <a href="#installation" class="bg-transparent border-2 border-white px-8 py-4 rounded-lg text-white font-semibold hover:bg-white/10 transition duration-300 inline-flex items-center">
                    <i class="fas fa-download mr-2 text-xl"></i> 查看安装指南
                </a>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            mermaid.initialize({
                startOnLoad: true,
                theme: 'default',
                flowchart: {
                    useMaxWidth: true,
                    htmlLabels: true,
                    curve: 'basis'
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
            
            // 卡片悬停效果
            const featureCards = document.querySelectorAll('.feature-card');
            featureCards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.transition = 'all 0.3s ease';
                });
            });
        });
    </script>
</body>
</html>
```